<template>
  <el-upload :action="uploadFileAction"
             :headers="headers"
             name="file"
             :show-file-list="false"
             list-type="picture-card"
             :before-upload="uploadBefore"
             :on-success="uploadSuccess"
             class="upload-container">
    <span class="iconfont iaiai-add f40 c-blue m-r-5" v-if="webUrl==null || webUrl.length<=0"></span>
    <el-row class="max" v-if="webUrl!=null && webUrl.length>0" @click.stop="">
      <img class="avator" :src="webUrl" />
      <el-row class="item-actions">
        <span class="iconfont iaiai-zoom-in f20 m-r-5 hand-cursor" @click.stop="handlePreview"></span>
        <span class="iconfont iaiai-delete f20 hand-cursor" @click.stop="removeImg"></span>
      </el-row>
      <!-- 图片预览 -->
      <el-image-viewer
          v-if="showImagePreview"
          :zoom-rate="1.2"
          @close="closePreview"
          :url-list="[webUrl]"/>
    </el-row>
    <template #tip v-if="showTip">
      <div class="el-upload__tip center-text" v-if="tipText==null">jpg/png，大小为{{size}}MB以内</div>
      <div class="el-upload__tip center-text" v-if="tipText!=null">{{tipText}}</div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import {onMounted, ref, defineProps, defineEmits, withDefaults, inject, defineExpose} from "vue"
import {UploadFile, UploadFiles, UploadRawFile} from "element-plus"
import {getToken} from "@/core/util/app_util"

const $api = inject('$api')
const $toast = inject('$toast')
const emit = defineEmits(['onsuccess'])
const webUrl = ref("")
const uploadFileAction = ref($api.uploadImg)
const headers = ref({})
const showImagePreview = ref(false)

export interface Props {
  size?: number,
  showTip?: boolean,
  tipText?: string,
  src?: string,
}

const props = withDefaults(defineProps<Props>(), {
  size: 1,
  showTip: true,
})

onMounted(()=>{
  webUrl.value = props.src
  headers.value["token"] = getToken()
})

function uploadBefore(rawFile: UploadRawFile){
  if (rawFile.size / 1024 / 1024 > props.size) {
    $toast.error('图片的文件大小不允许大于 '+props.size+'MB!')
    return false
  }
  return true
}

function uploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
  webUrl.value = response.result.webUrl
  emit('onsuccess',response.result.webUrl)
}

function handlePreview(){
  showImagePreview.value = true
}

function closePreview(){
  showImagePreview.value = false
}

function removeImg(){
  cleanImg()
  emit('remove')
}

function cleanImg(){
  webUrl.value = ""
}

defineExpose({
  cleanImg,
})
</script>

<style lang="scss" scoped>
.avator{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.item-actions{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 5px;
}

.item-actions:hover{
  opacity: 1;
}
</style>
